﻿/*老式布局工具*/
.clearFix:before, .clearFix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearFix:after {
	clear: both;
}

.clearFix {
	zoom: 1;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

/*<img>自然*/
.widthFix {
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}

.heightFix {
	margin: 0 auto;
	display: block;
	width: auto;
	height: 100%;
}

/*<img>拉伸*/
.scaleToFill {
	margin: 0 auto;
	display: block;
	width: 100%;
	height: 100%;
}

/*文字一行*/
.line-1,
.single-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*文字二行*/
.line-2,
.double-line {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fit-content {
	width: fit-content;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.w-percent100 {
	width: 100% !important;
}

.h-inherit {
	height: inherit !important;
}

.h-percent100 {
	height: 100% !important;
}

.block {
	display: block;
}

/*flex layout*/
.flex {
	display: flex;
}

.flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.flex-direction-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.space-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.space-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /*这个时候justify-content上下方向的左中右了, 即高中下!*/
}

.flex-1 {
	flex-grow: 1; //弹性盒的扩展比率：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
	flex-shrink: 1; //弹性盒的收缩比率：根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
	flex-basis: 0; //弹性盒伸缩基准值：如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
}

.flex-auto {
	flex-grow: 1; //弹性盒的扩展比率：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
	flex-shrink: 1; //弹性盒的收缩比率：根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
	flex-basis: auto; //弹性盒伸缩基准值：如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
}

.cursor-pointer {
	cursor: pointer;
}

/*ruler*/
.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-25 {
	margin-top: 25px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-35 {
	margin-top: 35px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-45 {
	margin-top: 45px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-55 {
	margin-top: 55px !important;
}

.mt-60 {
	margin-top: 60px !important;
}

.mt-65 {
	margin-top: 65px !important;
}

.mt-70 {
	margin-top: 70px !important;
}

.mt-75 {
	margin-top: 75px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mt-85 {
	margin-top: 85px !important;
}

.mt-90 {
	margin-top: 90px !important;
}

.mt-95 {
	margin-top: 95px !important;
}

.mt-100 {
	margin-top: 100px !important;
}

.mr-5 {
	margin-right: 5px !important;
}

.mr-10 {
	margin-right: 10px !important;
}

.mr-20 {
	margin-right: 20px !important;
}

.mr-30 {
	margin-right: 30px !important;
}

.mr-40 {
	margin-right: 40px !important;
}

.mr-50 {
	margin-right: 50px !important;
}

.mr-60 {
	margin-right: 60px !important;
}

.ml-10 {
	margin-left: 10px !important;
}

.fs-20 {
	font-size: 20px;
}

.fs-25 {
	font-size: 25px;
}

.fs-30 {
	font-size: 30px;
}

.p-0 {
	padding: 0 !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pl-50 {
	padding-left: 50px !important;
}

.pl-100 {
	padding-left: 100px !important;
}

.pr-50 {
	padding-right: 50px !important;
}

.pr-100 {
	padding-right: 100px !important;
}

.w-110 {
	width: 110px !important;
}

.w-260 {
	width: 260px !important;
}

/*test*/
.test {
	border: 1px solid black;
}

.c-000 {
	color: #000;
}

.bg-null {
	background-color: transparent !important;
}

.bg-w {
	background-color: white !important;
}

.bg-o {
	background-color: orange !important;
}

.bg-r {
	background-color: red !important;
}

.bg-g {
	background-color: green !important;
}

.bg-b {
	background-color: deepskyblue !important;
}

.bg-y {
	background-color: yellow !important;
}

.bg-teaMarket {
	background-color: #fafafa !important;
}

.bg-cadetblue {
	background-color: cadetblue !important;
}



